<template>
    <section class="stats-container">
        <!-- 用户统计容器 -->
        <section class="chart-container">
            <header class="date-picker-container">
                <el-date-picker v-model="userStatsDate" type="daterange" range-separator="To"
                    start-placeholder="Start date" end-placeholder="End date" class="date-picker" />
                <!-- 用户统计导出按钮 -->
                <el-button type="primary" @click="exportUserStats()" class="export-button">导出用户数据</el-button>
            </header>
            <!-- 用户统计图表 -->
            <article class="chart" id="userStatsChart"></article>
        </section>

        <!-- 订单统计容器 -->
        <section class="chart-container">
            <header class="date-picker-container">
                <el-date-picker v-model="orderStatsDate" type="daterange" range-separator="To"
                    start-placeholder="Start date" end-placeholder="End date" class="date-picker" />
                <!-- 订单统计导出按钮 -->
                <el-button type="primary" @click="exportOrderStats()" class="export-button">导出订单数据</el-button>
            </header>
            <!-- 订单统计图表 -->
            <article class="chart" id="orderStatsChart"></article>
        </section>
    </section>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import { getUserStatsAPI, getOrderStatsAPI, exportUserStatsAPI,exportOrderStatsAPI } from "@/apis/workspace.js";

// 数据绑定
const userStats = ref([]);
const orderStats = ref([]);

// 获取当前日期
const getCurrentDate = () => new Date().toISOString().split('T')[0]; // 返回日期格式: YYYY-MM-DD

// 获取当前日期加上指定天数后的日期
const getDatePlusDays = (days) => {
    const date = new Date();
    date.setDate(date.getDate() + days); // 增加指定天数
    return date.toISOString().split('T')[0]; // 返回格式化后的日期
};

// 设置默认日期范围为过去7天
const userStatsDate = ref([getDatePlusDays(-7), getCurrentDate()]); // 过去7天到今天
const orderStatsDate = ref([getDatePlusDays(-7), getCurrentDate()]); // 过去7天到今天

// 通用图表配置
const createChart = (containerId, title, data, chartType = 'bar', color = '#6a5acd') => {
    const chart = echarts.init(document.getElementById(containerId));

    const options = {
        title: {
            text: title,
            left: "center",
            top: "10px",
            textStyle: {
                color: "#333",
                fontWeight: "bold",
            },
        },
        tooltip: {},
        xAxis: {
            type: "category",
            data: data.map(item => item.date),
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: data.map(item => item.count),
                type: chartType, // 默认条形图，可传入其它图表类型
                itemStyle: {
                    color: color,
                },
            },
        ],
    };

    chart.setOption(options);
};

const formatDate = (date) => {
    const localDate = new Date(date); // 将字符串转换为 Date 对象
    const year = localDate.getFullYear();
    const month = String(localDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
    const day = String(localDate.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
};

// 请求并更新用户统计数据
const getUserStats = async () => {
    const startDate = formatDate(userStatsDate.value[0]);
    const endDate = formatDate(userStatsDate.value[1]);
    const res = await getUserStatsAPI(startDate, endDate);
    userStats.value = res.data;
    createChart('userStatsChart', '新增用户统计', userStats.value); // 更新用户统计图表
}

// 请求并更新订单统计数据
const getOrderStats = async () => {
    const startDate = formatDate(orderStatsDate.value[0]);
    const endDate = formatDate(orderStatsDate.value[1]);
    const res = await getOrderStatsAPI(startDate, endDate);
    orderStats.value = res.data;
    createChart('orderStatsChart', '订单统计', orderStats.value, 'line', '#ff6347'); // 更新订单统计图表
}

// 通用的导出函数
const exportStats = async (apiFunction, fileNamePrefix, dateRange) => {
    try {
        const startDate = formatDate(dateRange[0]);
        const endDate = formatDate(dateRange[1]);

        // 调用传入的 API 函数获取数据
        const res = await apiFunction(startDate, endDate);

        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        // 创建一个 URL 对象
        const url = window.URL.createObjectURL(blob);

        // 创建一个 <a> 标签
        const a = document.createElement('a');
        a.href = url;
        a.download = `${fileNamePrefix}_${startDate}_${endDate}.xlsx`; // 设置下载文件的名称

        // 触发点击事件
        document.body.appendChild(a);
        a.click();

        // 移除 <a> 标签
        document.body.removeChild(a);

        // 释放 URL 对象
        window.URL.revokeObjectURL(url);

        console.log('文件下载成功');
    } catch (error) {
        console.error('文件下载失败', error);
    }
};

// 导出用户统计数据
const exportUserStats = async () => {
    await exportStats(exportUserStatsAPI, 'user_stats', userStatsDate.value);
};

// 导出订单统计数据
const exportOrderStats = async () => {
    await exportStats(exportOrderStatsAPI, 'order_stats', orderStatsDate.value);
};

// 初始化并加载数据
onMounted(() => {
    getUserStats();
    getOrderStats();
});

// 监听用户日期选择变化
watch(userStatsDate, () => {
    getUserStats(); // 只请求并更新用户数据
});

// 监听订单日期选择变化
watch(orderStatsDate, () => {
    getOrderStats(); // 只请求并更新订单数据
});
</script>

<style scoped>
/* 容器样式 */
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 图表容器样式 */
.chart-container {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 日期选择器容器样式 */
.date-picker-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 设置按钮和日期选择器之间的间距 */
    margin-bottom: 20px;
}

/* 日期选择器样式 */
.date-picker {
    width: auto; /* 保持日期选择器的默认宽度 */
    flex-grow: 1; /* 允许日期选择器占据剩余空间 */
}

/* 导出按钮样式 */
.export-button {
    flex-shrink: 0; /* 防止按钮被压缩 */
}

/* 图表容器样式 */
.chart {
    height: 400px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>